<template>
  <div class="app-container">
    <div style="padding: 20px;">
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            新增/修改
          </strong>
        </el-col>
      </el-row>

      <div style="padding:20px">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="班次" prop="type">
            <el-select
              v-model="form.type"
              filterable
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类型" prop="phase">
            <el-select
              v-model="form.phase"
              filterable
              @change="changePhase"
            >
              <el-option
                v-for="item in phases"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="起扣时间(分钟)">
            <el-input-number v-model="form.fromMinute" :min="1" :max="9999" :disabled="disabled" />
            <div class="help-text" style="display: flex;">
              <div>
                <p class="el-icon-info" />
              </div>
              <div>
                <p v-html="'9999为区间封顶时间'" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="扣罚金额" prop="price">
            <el-input v-model="form.price" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: Number(this.$route.params.id),
      store: '',
      form: {
        type: null,
        phase: null,
        price: '',
        fromMinute: 1
      },
      disabled: false,
      types: [],
      phases: [
        { name: '早退', id: 0 },
        { name: '迟到', id: 1 },
        { name: '缺勤(下班)', id: 2 },
        { name: '缺勤(上班)', id: 3 }
      ]
    }
  },
  created() {
    this.store = localStorage.getItem('storeId')
    if (this.store > 0) {
      this.getTypes()
      if (this.id) {
        this.axios.get(`/store/${this.store}/attendance-settings/${this.id}`).then((res) => {
          this.form.type = res.data.type?.id
          if (res.data.phase) {
            if (res.data.fromMinute >= 9999) {
              this.form.phase = 3
              this.disabled = true
            } else {
              this.form.phase = 1
            }
          } else {
            if (res.data.fromMinute >= 9999) {
              this.form.phase = 2
              this.disabled = true
            } else {
              this.form.phase = 0
            }
          }
          this.form.price = res.data.price
          this.form.fromMinute = res.data.fromMinute
        })
      }
    }
  },
  methods: {
    changePhase(e) {
      if (e > 1) {
        this.disabled = true
        this.form.fromMinute = 9999
      } else {
        this.disabled = false
      }
      this.$forceUpdate()
    },
    getTypes() {
      this.axios.get(`/store/${this.store}/attendance-types`, {
        params: {
          limit: 10000000
        }
      }).then((res) => {
        this.types = res.data
      })
    },
    cleanBlankAttributes(data) {
      for (var propName in data) {
        if (data[propName] === null || data[propName] === undefined) {
          delete data[propName]
        }
      }
    },
    onSubmit() {
      if (this.store > 0) {
        if (!this.form.type) {
          this.$message.error('请选择班次！')
          return
        }
        if (this.form.phase === null) {
          this.$message.error('请选择类型！')
          return
        }
        if (!this.form.price) {
          this.$message.error('请填写金额！')
          return
        }

        if (this.form.phase === 1 || this.form.phase === 3) {
          this.form.phase = true
        } else {
          this.form.phase = false
        }

        if (this.id) {
          const loading = this.$loading({
            lock: true,
            text: '数据交互中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.axios.put(`/store/${this.store}/attendance-settings/${this.id}`, this.form).then((res) => {
            this.$message.success('修改成功！')
            this.$router.go(-1)
            loading.close()
          })
        } else {
          const loading = this.$loading({
            lock: true,
            text: '数据交互中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.axios.post(`/store/${this.store}/attendance-settings`, this.form).then(staff => {
            loading.close()
            this.$message.success('修改成功！')
            this.$router.go(-1)
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.help-text {
  display: flex;
  p {
    color: gray;
    line-height: 1.3em;
  }
  div {
    padding: 0 3px;
  }
}
</style>
